<template>
  <view class="menu-box">
    <view v-for="(item, index) in menuList" :key="item.id">
      <view
        class="menu-box-inner"
        v-if="msgUserId == userId || !item.isShowSelf"
        @click="clickMenu(item.type, content)"
      >
        <image class="menu-icon" :src="item.icon" />
        <view class="text-style">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    msgUserId: {
      type: String,
      default: ''
    },
    msgId: {
      type: Number,
      default: 0
    },
    msgSortId: {
      type: Number,
      default: 0
    },
    content: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      menuList: [
        {
          id: 1,
          isShowSelf: true,
          name: '撤回',
          type: 'cancel',
          icon: 'http://xxx/static/app/logo/publicLogo/cancel.png'
        },
        {
          id: 2,
          isShowSelf: false,
          name: '复制',
          type: 'copy',
          icon: 'http://xxx/static/app/logo/publicLogo/copy.png'
        },
        {
          id: 3,
          isShowSelf: false,
          name: '引用',
          type: 'quote',
          icon: 'http://xxx/static/app/logo/publicLogo/quote.png'
        }
      ],
      userId: uni.getStorageSync('userId')
    }
  },
  methods: {
    //点击菜单
    clickMenu(type, text) {
      switch (type) {
        case 'cancel':
          this.delMsg()
          break
        case 'copy':
          this.copyText(text)
          break
        default:
          console.log(type)
      }
    },

    //撤回消息
    delMsg() {
      this.$request(
        '/msg/delMsg',
        'DELETE',
        { msgId: this.msgId },
        { 'Content-Type': 'application/x-www-form-urlencoded' }
      ).then((res) => {
        if (res.data.status == 'ok') {
          uni.showToast({
            icon: 'none',
            title: '消息已撤回',
            duration: 1000
          })
          this.$emit('cancelMsg', this.msgSortId)
        }
      })
    },

    //复制信息
    copyText(text) {
      wx.setClipboardData({
        data: text,
        success(res) {
          wx.getClipboardData({
            success(res) {
              uni.showToast({
                icon: 'none',
                title: '复制成功',
                duration: 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-box {
  min-width: 100rpx;
  height: 100rpx;
  @extend center;

  .menu-box-inner {
    width: 90rpx;
    @extend center;
    flex-direction: column;

    .menu-icon {
      width: 45rpx;
      height: 45rpx;
    }

    .text-style {
      font-size: 23rpx;
      color: #e6e6e6;
    }
  }
}
</style>
